html,body{
  width:100%;
  height:100%;
  font-size: calc(100vw/7.50);
  color: #000;
  background: #f6f6f6;
  overflow-y: scroll;
  font-family:Microsoft YaHei;
  -webkit-text-size-adjust: 100%;//iPhone在坚屏转向横屏时放大文字
  -ms-text-size-adjust: 100%;
}

@rem:54rem;
.height(@num){
  height:@num/@rem;
}

/*!*去除a标签点击样式*!*/
body{
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  /*padding-bottom: constant(safe-area-inset-bottom);*/
}

*{
  padding:0;
  margin:0;
  list-style: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}

i,span,a{
  display:inline-block;
}

a{
  text-decoration:none;
  color:#000;
  cursor:pointer;
}

i{
  font-style:normal;
}

.line2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  word-break:break-all;
  overflow: hidden;
}

.over{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  word-break:break-all;
}

.clearfix{
  &::before,&::after{
    content: " ";
    display: table;
  }
  &::after{
    clear: both;
  }
}

.justify-content{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  align-items: center;
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background-color: #f5f5f5;
}


#app{
  width:100%;
  height:100%;
}
/*头部*/
.top{
  width:auto;
  height:90/@rem;
  background: #1a1a1f;
  padding:0 24/@rem;
  font-size:36/@rem;
  line-height:90/@rem;
  color:#fff;
  position:relative;
  text-align: center;

  .return{
    position:absolute;
    top:0;
    left:0;
    padding-left:54/@rem;
    width:auto;
    height:100%;
    color:#fff;
    font-size:28/@rem;
    line-height:90/@rem;
    background:~"url(image/return_arrow.png)" 24/@rem center no-repeat;
    background-size:auto 48/@rem;
  }

  .oprate{
    position:absolute;
    top:0;
    right:0;
    width:94/@rem;
    height:100%;
    background:~"url(image/top_oprate.png)" center no-repeat;
    background-size:auto 10/@rem;
  }
}

.head{
  width:100%;
  height:90/@rem;
  background:#fedc00;
  font-size:32/@rem;
  color:#000;
  line-height:90/@rem;
  text-align: center;
}

.content{
  width:100%;
  height:auto;
}

//关注礼包页面attention_gift
#attention_gift{
  .banner{
    width:100%;
    height:auto;

    .el-carousel__container{
      width:100%;
      height:346/@rem;
    }

    a,img{
      display:block;
      width:100%;
      height:100%;
    }
  }

  .content_block{
    width:auto;
    height:auto;
    padding:0 24/@rem;
    margin-top:30/@rem;
  }

  .check-all{
    width:auto;
    height:76/@rem;
    background:#fff;
    border-radius: 10/@rem;
    border:1px solid #ededed;
    font-size:24/@rem;
    color:#73450e;
    line-height:76/@rem;

    i{
      width:62/@rem;
      height:100%;
      background:~"url(image/select_tip.png)" right center no-repeat;
      background-size:32/@rem auto;
      float:left;
      margin-right:10/@rem;
    }

    .check-all-btn{
      width:165/@rem;
      height:100%;
      float:right;
      position:relative;

      &::before{
        content:'';
        display:inline-block;
        width:1px;
        height:30/@rem;
        background:#dcdcdc;
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        margin:auto;
      }

      //修改全选，不选样式
      .el-checkbox__inner{
        &::before,&::after{
          height:0;
          border:0;
        }
      }

      .el-checkbox{
         height:76/@rem;
         display:block;
         text-align: center;

        .el-checkbox__input{
          width:29/@rem;
          height:29/@rem;
          margin-top:-14/@rem;

          .el-checkbox__inner{//未选中
            width:100%;
            height:100%;
            background:~"url('image/check-all-no.png') center no-repeat";
            background-size:29/@rem auto;
            border:0;
          }

          &.is-checked>.el-checkbox__inner{//选中
            .el-checkbox__inner;
            background:~"url('image/check-all-yes.png') center no-repeat";
            background-size:29/@rem auto;
          }

        }
      }
      //结束

      .el-checkbox__label{
        font-size:30/@rem;
        line-height:76/@rem;
        color:#242322;
      }
    }
  }

  .gift-list{
    width:auto;
    height:auto;
    padding:0 30/@rem;

    .el-checkbox-group{
      .clearfix;
      height:100%;
    }

    .el-checkbox+.el-checkbox{
      margin-left:0;
    }

    //修改全选，不选样式
    .el-checkbox__inner{
      &::before,&::after{
        height:0;
        border:0;
      }
    }

    .el-checkbox{
      display:block;
      margin-top:50/@rem;
      height:167/@rem;

      .el-checkbox__input{
        width:58/@rem;
        height:100%;
        background:#dcdcdc;
        float:left;
        border-top-left-radius:10/@rem;
        border-bottom-left-radius:10/@rem;

        &.is-checked{
          background:#f39800;
        }

        .el-checkbox__inner{//未选中
          width:100%;
          height:100%;
          background:~"url('image/check-all-no.png') center no-repeat";
          background-size:29/@rem auto;
          border:0;
        }

        &.is-checked>.el-checkbox__inner{//选中
          .el-checkbox__inner;
          background:~"url('image/check-all-yes.png') center no-repeat";
          background-size:29/@rem auto;
        }
      }

      .el-checkbox__label{
        @calc:58/@rem;
        display:block;
        width:calc(~"100% - @{calc}");
        height:100%;
        float:left;
        padding-left:0;
        .clearfix;

        .gift-info{
          @calc:231/@rem;
          width:calc(~"100% - @{calc}");
          height:100%;
          background:#fff;
          padding:0 32/@rem;
          float:left;

          p{
            width:100%;
            height:100/@rem;
            font-size:28/@rem;
            color:#161616;
            line-height:100/@rem;
            .over;
          }

          span{
            font-size:20/@rem;
            color:#a8a8a8;
          }
        }

        .gift-look{
          width:167/@rem;
          height:100%;
          background:#9cc84e;
          float:left;
          position:relative;

          a{
            width:100%;
            height:100%;
            background:~"url('image/gift_look_bg.png') center no-repeat";
            background-size:140/@rem auto;
            text-align: center;
            vertical-align: middle;

            i{
              width:100%;
              height:100%;
              font-size:32/@rem;
              color:#fff;
              line-height:36/@rem;
              .justify-content;
            }
          }

          .circle{
            width:16/@rem;
            height:16/@rem;
            border-radius: 8/@rem;
            background:#f6f6f6;
            position:absolute;
            left:-8/@rem;

            &.up{
              top:-8/@rem;
            }
            &.down{
              bottom:-8/@rem;
            }
          }
        }
      }
    }
    //结束

  }

  .foot-btn{
    @calc:60/@rem;
    width:calc(~"100% - @{calc}");
    margin:126/@rem auto 86/@rem;
    height:72/@rem;
    border-radius:36/@rem;
    font-size:32/@rem;
    color:#fff;
    text-align: center;
    line-height:72/@rem;
    background: -webkit-linear-gradient(left, #8bbc05 , #70ab49); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #8bbc05 , #70ab49); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #8bbc05 , #70ab49); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #8bbc05 , #70ab49); /* 标准的语法 */
  }
}